<template>
  <div class="department-cooperation-container">
    <!-- 页面头部区域 -->
    <div class="cooperation-header">
      <div class="header-content">
        <div class="ancient-title">部门协作管理</div>
        <div class="header-subtitle">阴曹地府 · 十殿协调与任务分配</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">🤝</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息显示 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/management">
            <ApartmentOutlined />
            机构管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <TeamOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <BankOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">运行部门</div>
              <div class="stat-value">{{ cooperationStats.activeDepartments }}</div>
              <div class="stat-label">十殿阎王</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <ClusterOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">协作项目</div>
              <div class="stat-value">{{ cooperationStats.cooperationProjects }}</div>
              <div class="stat-label">进行中</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <InboxOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">待分配</div>
              <div class="stat-value">{{ cooperationStats.pendingTasks }}</div>
              <div class="stat-label">任务数量</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon">
              <NodeIndexOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">工作流程</div>
              <div class="stat-value">{{ cooperationStats.workflowEfficiency }}%</div>
              <div class="stat-label">执行效率</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块导航 -->
    <div class="modules-section">
      <h3 class="section-title">
        <TeamOutlined class="section-icon" />
        协作管理功能
      </h3>

      <a-row :gutter="[24, 24]" class="modules-grid">
        <!-- 十殿阎王分工 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/department-cooperation/ten-courts-division')">
            <div class="module-header">
              <div class="module-icon">
                <BankOutlined />
              </div>
              <div class="module-title">十殿阎王分工</div>
            </div>
            <div class="module-description">管理十殿阎王的职责分工，明确各殿业务范围和权责划分</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">运行殿数：</span>
                <span class="stat-value">{{ moduleStats.tenCourtsDivision.activeCourts }}殿</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">业务范围：</span>
                <span class="stat-value">{{ moduleStats.tenCourtsDivision.businessScopes }}项</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 部门间协调 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/department-cooperation/coordination')">
            <div class="module-header">
              <div class="module-icon">
                <ClusterOutlined />
              </div>
              <div class="module-title">部门间协调</div>
            </div>
            <div class="module-description">协调各部门间的合作关系，处理跨部门事务和冲突解决</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">协调案例：</span>
                <span class="stat-value">{{ moduleStats.coordination.cases }}件</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">解决率：</span>
                <span class="stat-value">{{ moduleStats.coordination.resolutionRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 工作流程设置 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/department-cooperation/workflow-setting')">
            <div class="module-header">
              <div class="module-icon">
                <NodeIndexOutlined />
              </div>
              <div class="module-title">工作流程设置</div>
            </div>
            <div class="module-description">设计和优化部门间工作流程，提高协作效率和质量</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">流程数：</span>
                <span class="stat-value">{{ moduleStats.workflowSetting.processes }}个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">优化率：</span>
                <span class="stat-value">{{ moduleStats.workflowSetting.optimizationRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 任务分配系统 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/department-cooperation/task-allocation')">
            <div class="module-header">
              <div class="module-icon">
                <InboxOutlined />
              </div>
              <div class="module-title">任务分配系统</div>
            </div>
            <div class="module-description">智能分配和管理跨部门任务，监控任务执行进度和质量</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">活跃任务：</span>
                <span class="stat-value">{{ moduleStats.taskAllocation.activeTasks }}项</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">完成率：</span>
                <span class="stat-value">{{ moduleStats.taskAllocation.completionRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 十殿概览 -->
    <div class="courts-overview-section">
      <h3 class="section-title">
        <BankOutlined class="section-icon" />
        十殿阎王概览
      </h3>

      <div class="courts-grid">
        <a-row :gutter="[16, 16]">
          <a-col :xs="24" :sm="12" :lg="8" :xl="6" v-for="court in tenCourts" :key="court.id">
            <div class="court-card">
              <div class="court-header">
                <div class="court-icon">
                  <BankOutlined />
                </div>
                <div class="court-info">
                  <h4 class="court-name">{{ court.name }}</h4>
                  <p class="court-king">{{ court.king }}</p>
                </div>
                <div class="court-status">
                  <a-tag :color="court.status === 'active' ? 'green' : 'red'">
                    {{ court.status === 'active' ? '运行中' : '维护中' }}
                  </a-tag>
                </div>
              </div>

              <div class="court-responsibility">
                <h5>主要职责</h5>
                <p>{{ court.responsibility }}</p>
              </div>

              <div class="court-stats">
                <a-row :gutter="8">
                  <a-col :span="8">
                    <div class="stat-mini">
                      <div class="stat-number">{{ court.dailyCases }}</div>
                      <div class="stat-label">日案件</div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div class="stat-mini">
                      <div class="stat-number">{{ court.staffCount }}</div>
                      <div class="stat-label">人员</div>
                    </div>
                  </a-col>
                  <a-col :span="8">
                    <div class="stat-mini">
                      <div class="stat-number">{{ court.efficiency }}%</div>
                      <div class="stat-label">效率</div>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </div>

    <!-- 最新协作动态 -->
    <div class="cooperation-dynamics-section">
      <h3 class="section-title">
        <NotificationOutlined class="section-icon" />
        最新协作动态
      </h3>

      <div class="dynamics-list">
        <a-list
          :data-source="cooperationDynamics"
          :pagination="{
            pageSize: 5,
            showSizeChanger: false
          }"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <a-avatar :style="{ backgroundColor: item.avatarColor }" size="large">
                    <component :is="item.icon" />
                  </a-avatar>
                </template>
                <template #title>
                  <span class="dynamics-title">{{ item.title }}</span>
                  <a-tag :color="item.tagColor" size="small" style="margin-left: 8px">{{ item.type }}</a-tag>
                </template>
                <template #description>
                  <div class="dynamics-description">{{ item.description }}</div>
                  <div class="dynamics-meta">
                    <span class="dynamics-time">{{ item.time }}</span>
                    <span class="dynamics-departments">涉及部门：{{ item.departments.join('、') }}</span>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { HomeOutlined, ApartmentOutlined, TeamOutlined, BankOutlined, ClusterOutlined, InboxOutlined, NodeIndexOutlined, NotificationOutlined } from '@ant-design/icons-vue'

const router = useRouter()

// 协作统计信息
const cooperationStats = reactive({
  activeDepartments: 10,
  cooperationProjects: 45,
  pendingTasks: 28,
  workflowEfficiency: 92
})

// 模块统计信息
const moduleStats = reactive({
  tenCourtsDivision: {
    activeCourts: 10,
    businessScopes: 25
  },
  coordination: {
    cases: 156,
    resolutionRate: 94
  },
  workflowSetting: {
    processes: 18,
    optimizationRate: 85
  },
  taskAllocation: {
    activeTasks: 128,
    completionRate: 88
  }
})

// 十殿阎王数据
const tenCourts = ref([
  {
    id: 1,
    name: '第一殿',
    king: '秦广王',
    responsibility: '专司人间寿夭生死册籍，统管幽冥吉凶',
    status: 'active',
    dailyCases: 285,
    staffCount: 156,
    efficiency: 95
  },
  {
    id: 2,
    name: '第二殿',
    king: '楚江王',
    responsibility: '专司活大地狱，凡在阳间损人利己，杀生害命者',
    status: 'active',
    dailyCases: 234,
    staffCount: 134,
    efficiency: 92
  },
  {
    id: 3,
    name: '第三殿',
    king: '宋帝王',
    responsibility: '专司黑绳大地狱，凡在阳间忤逆不孝者',
    status: 'active',
    dailyCases: 198,
    staffCount: 125,
    efficiency: 89
  },
  {
    id: 4,
    name: '第四殿',
    king: '五官王',
    responsibility: '专司合大地狱，专门惩治逃漏税赋，赖账不还者',
    status: 'active',
    dailyCases: 267,
    staffCount: 142,
    efficiency: 93
  },
  {
    id: 5,
    name: '第五殿',
    king: '阎罗王',
    responsibility: '专司叫唤大地狱，凡解到此殿者，押赴望乡台',
    status: 'active',
    dailyCases: 312,
    staffCount: 178,
    efficiency: 96
  },
  {
    id: 6,
    name: '第六殿',
    king: '卞城王',
    responsibility: '专司大叫唤大地狱及枉死城，凡在世不信因果者',
    status: 'active',
    dailyCases: 189,
    staffCount: 118,
    efficiency: 87
  },
  {
    id: 7,
    name: '第七殿',
    king: '泰山王',
    responsibility: '专司热恼地狱，又名碓磨肉酱地狱',
    status: 'active',
    dailyCases: 156,
    staffCount: 98,
    efficiency: 84
  },
  {
    id: 8,
    name: '第八殿',
    king: '都市王',
    responsibility: '专司大热恼地狱，又名恼闷锅地狱',
    status: 'active',
    dailyCases: 203,
    staffCount: 112,
    efficiency: 90
  },
  {
    id: 9,
    name: '第九殿',
    king: '平等王',
    responsibility: '专司阿鼻地狱，凡阳世杀人放火，斩绞等罪',
    status: 'active',
    dailyCases: 134,
    staffCount: 89,
    efficiency: 86
  },
  {
    id: 10,
    name: '第十殿',
    king: '转轮王',
    responsibility: '专司各殿解到鬼魂，分别善恶，核定等级，发四大部洲投生',
    status: 'active',
    dailyCases: 456,
    staffCount: 234,
    efficiency: 98
  }
])

// 最新协作动态
const cooperationDynamics = ref([
  {
    id: 1,
    title: '十殿联合审理重大案件',
    description: '针对一起涉及多个业务领域的复杂案件，十殿阎王启动联合审理机制',
    type: '联合审理',
    time: '2小时前',
    departments: ['第一殿', '第五殿', '第十殿'],
    icon: 'BankOutlined',
    avatarColor: '#1890ff',
    tagColor: 'blue'
  },
  {
    id: 2,
    title: '业务流程优化完成',
    description: '第二殿与第三殿共同优化的"忤逆不孝案件"处理流程正式上线',
    type: '流程优化',
    time: '4小时前',
    departments: ['第二殿', '第三殿'],
    icon: 'NodeIndexOutlined',
    avatarColor: '#52c41a',
    tagColor: 'green'
  },
  {
    id: 3,
    title: '跨部门任务分配调整',
    description: '根据各殿处理能力，重新分配本月轮回转世相关任务',
    type: '任务分配',
    time: '6小时前',
    departments: ['第十殿', '第九殿', '第八殿'],
    icon: 'InboxOutlined',
    avatarColor: '#fa8c16',
    tagColor: 'orange'
  },
  {
    id: 4,
    title: '部门协作会议召开',
    description: '月度部门协作总结会议在阎罗殿举行，讨论协作效率提升方案',
    type: '协作会议',
    time: '1天前',
    departments: ['十殿阎王'],
    icon: 'TeamOutlined',
    avatarColor: '#722ed1',
    tagColor: 'purple'
  },
  {
    id: 5,
    title: '新协作机制启动',
    description: '启动"急案快审"跨部门协作机制，缩短紧急案件处理周期',
    type: '机制创新',
    time: '2天前',
    departments: ['全部门'],
    icon: 'ClusterOutlined',
    avatarColor: '#eb2f96',
    tagColor: 'magenta'
  }
])

// 导航到指定模块
const navigateToModule = (path) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.department-cooperation-container {
  padding: 24px;

  // 页面头部
  .cooperation-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.judgment-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.pending-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.online-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 模块导航区域
  .modules-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .module-card {
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      height: 100%;

      .module-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .module-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, $secondary-color, #f0c674);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: white;
        }

        .module-title {
          font-size: 18px;
          font-weight: bold;
          color: $primary-color;
        }
      }

      .module-description {
        color: $text-secondary;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .module-stats {
        padding-top: 16px;
        border-top: 1px solid rgba(212, 153, 10, 0.2);

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .stat-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .stat-value {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }

  // 十殿概览区域
  .courts-overview-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .courts-grid {
      .court-card {
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        border: 1px solid rgba(212, 153, 10, 0.2);
        transition: all 0.3s ease;
        height: 100%;

        .court-header {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          margin-bottom: 16px;

          .court-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, $secondary-color, #f0c674);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;
            color: white;
            flex-shrink: 0;
          }

          .court-info {
            flex: 1;

            .court-name {
              margin: 0 0 4px 0;
              color: $primary-color;
              font-size: 16px;
              font-weight: bold;
            }

            .court-king {
              margin: 0;
              color: $text-secondary;
              font-size: 14px;
            }
          }

          .court-status {
            flex-shrink: 0;
          }
        }

        .court-responsibility {
          margin-bottom: 16px;

          h5 {
            margin: 0 0 8px 0;
            color: $primary-color;
            font-size: 14px;
            font-weight: bold;
          }

          p {
            margin: 0;
            color: $text-secondary;
            font-size: 12px;
            line-height: 1.4;
          }
        }

        .court-stats {
          .stat-mini {
            text-align: center;

            .stat-number {
              font-size: 16px;
              font-weight: bold;
              color: $secondary-color;
              margin-bottom: 2px;
            }

            .stat-label {
              font-size: 11px;
              color: $text-secondary;
            }
          }
        }
      }
    }
  }

  // 协作动态区域
  .cooperation-dynamics-section {
    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .dynamics-list {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);

      .dynamics-title {
        font-weight: bold;
        color: $primary-color;
        font-size: 16px;
      }

      .dynamics-description {
        color: $text-primary;
        line-height: 1.5;
        margin-bottom: 8px;
      }

      .dynamics-meta {
        display: flex;
        gap: 16px;

        .dynamics-time {
          color: $text-secondary;
          font-size: 14px;
        }

        .dynamics-departments {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
